<template>
    <section>
        <div class="header">
            <div class="search">
                <router-link to='/'><i class="el-icon-back"></i></router-link>
                <input type="text" placeholder="搜索目的地/折扣/关键字" value="接送机">
            </div>
            <div class="nav">
                <div :class="{'border':isplay==1}" @click='show(1)'>接送机</div>
                <div :class="{'border':isplay==2}" @click='show(2)'>出发地</div>
                <div :class="{'border':isplay==3}" @click='show(3)'>{{val}}</div>
                <div :class="{'border':isplay==4}" @click='show(4)'>筛选</div>
            </div>
        </div>
        <div class="transfer" v-if="isplay==1" :class="{'posi':isplay==1}">
            <div class="all">
                <h4></h4>
                <ul>
                    <li>
                        <router-link to=''>全部分类</router-link>
                    </li>
                </ul>
            </div>
            <div class="bus">
                <h4>交通接送</h4>
                <ul>
                    <li>
                        <router-link to=''>接送机</router-link>
                    </li>
                    <li>
                        <router-link to=''>包车</router-link>
                    </li>
                    <li>
                        <router-link to=''>城市交通</router-link>
                    </li>
                    <li>
                        <router-link to=''>观光巴士</router-link>
                    </li>
                    <li>
                        <router-link to=''>火车票</router-link>
                    </li>

                </ul>
            </div>
        </div>
        <div class="departure" v-if='isplay==2' :class="{'posi':isplay==2}"></div>
        <div class="sort" v-if='isplay==3' :class="{'posi':isplay==3}">
            <ul>
                <li :class="{'correct':cc==1}" @click="togle(1)" v-model="val">综合排序</li>
                <li :class="{'correct':cc==2}" @click="togle(2)" v-model="val">销量排序</li>
            </ul>

        </div>
        <div class="filter" v-if='isplay==4' :class="{'posi':isplay==4}">
            <div class="location">
                <h4>景点 <span @click='more'>更多</span></h4>
                <ul :class="{'hight':xx}">
                    <li v-for="item in list"><router-link to=''>{{item}}</router-link></li>
                </ul>
            </div>
            <div class="promotion">
                <h4>促销标签</h4>
                <ul>
                    <li>穷游精选</li>
                </ul>
            </div>
            <div class="btn">
                <button>重置</button>
                <button>全部223个好货</button>
            </div>
        </div>
        <div class="bgc" :class="{'screen':all}"></div>

        <div class="content">
            <div class="info" v-for="item in obj">
                <router-link to=''>
                    <div class="img">
                        <img :src="item.img">
                        <span>{{item.location}}</span>
                    </div>
                    <div class="detail">
                        <p>{{item.title}}</p>
                        <p>
                            <span v-show="item.transfer">{{item.transfer}}</span>
                            <span v-show="item.viper">{{item.vipcar}}</span>
                            <span v-show="item.confirm">{{item.confirm}}</span>
                        </p>
                        <span>{{item.count}}</span>
                        <span>
                            <em>{{item.price}}</em>元起
                        </span>
                    </div>
                </router-link>
            </div>
        </div>
    </section>

</template>


<script type="text/javascript">

    export default {
        name:'transfer',
        data(){
            return{
                isplay:0,
                xx:true,
                all:false,
                cc:1,
                val:'综合排序',
                list:['廊曼国际机场','素万那普机场','康提湖','哈桑二世清真寺','羽田机场','品纳维拉大象孤儿院','泰国素万那普机场','马若雷勒花园','阿特拉斯影城','马拉喀什博物馆','代尼兹利机场','代尼兹利长途大巴站'],
                obj:[
                    {
                        title:'【方便快捷】泰国普吉岛机场包车接/送机服务(中文接待,抵达后2小时等待)',
                        transfer:'接送机',
                        vipcar:'包车',
                        confirm:'二次确认',
                        count:'已售5055件',
                        price:89,
                        location:'普吉岛出发',
                        img:require('../../assets/plays/1.jpg')
                    },
                    {
                        title:'土耳其伊斯坦布尔接机/送机 欧洲机场/亚洲机场接送机 举牌接机',
                        transfer:'接送机',
                        vipcar:'包车',
                        confirm:'二次确认',
                        count:'已售42件',
                        price:231,
                        location:'伊斯坦布尔',
                        img:require('../../assets/plays/2.png')
                    },
                    {
                        title:'日本东京成田机场至市区中文专车接送机服务',
                        transfer:'接送机',
                        vipcar:'',
                        confirm:'',
                        count:'已售306件',
                        price:645,
                        location:'日本',
                        img:require('../../assets/plays/3.png')
                    },
                    {
                        title:'日本东京羽田机场至市区中文专车接送机服务',
                        transfer:'接送机',
                        vipcar:'包车',
                        confirm:'',
                        count:'已售695件',
                        price:400,
                        location:'日本',
                        img:require('../../assets/plays/4.png')
                    },
                    {
                        title:'澳大利亚悉尼机场至市区中文专车接送机服务',
                        transfer:'接送机',
                        vipcar:'包车',
                        confirm:'',
                        count:'已售108件',
                        price:245,
                        location:'澳大利亚',
                        img:require('../../assets/plays/5.jpg')
                    },
                    {
                        title:'美国纽约肯尼迪机场至市区中文专车接送机服务',
                        transfer:'接送机',
                        vipcar:'',
                        confirm:'',
                        count:'已售45件',
                        price:330,
                        location:'美国',
                        img:require('../../assets/plays/6.jpg')
                    },
                ]
            }
        },
        methods:{
            more(){
                this.xx = !this.xx
            },
            show(n){
                this.all = !this.all
                if(this.isplay == n){
                    this.isplay = 0;
                }
                else{
                    this.isplay = n;
                }
            },
            togle(n){
                this.cc = n;
                if(n==2){
                    this.val = '销量排序'
                }else{
                    this.val = '综合排序'
                }

            }
        }
    }
</script>

<style type="text/css" lang="less">
section{
    position: relative;
    .header{
        // position: fixed;
        // top:0;
        // width: 100%;
        // z-index: 100;

        .search{
            background-color:#19C48A;
            padding:1em 0;
           i{
                margin-left: 1em;
            }
            input{
                width: 80%;
                padding:0.5em 0;
                border-radius: 10px;
                outline: none;
                border:transparent;
                text-indent: 2em;
                background-image: url(../../assets/feeds/搜索.png);
                background-repeat: no-repeat;
                background-position: center left 0.5em;
                background-color:#54cfa7;
            }
        }
        .nav{
            display: flex;
            padding: 15px 15px 0 15px;
            box-sizing: border-box;
            z-index: 9;
            border-bottom: 1px solid rgba(0, 0, 0, .1);
            background-color: #ffffff;
            div{
                box-sizing: border-box;
                width: 25%;
                background-image: url(../../assets/feeds/三角下.png);
                background-repeat: no-repeat;
                background-position: center right;
                height: 38px;
                line-height: 38px;
                text-align: center;
            }
        }
    }
    .content{
        .info{
            border-bottom:1px solid rgba(0, 0, 0, .1);;
            a{
                display: block;
                text-decoration: none;
                color:#333;
                display: flex;
                justify-content: space-around;
                margin:1em 0;
                .img{
                    width: 100px;
                    height: 100px;
                    border-radius:10px;
                    position: relative;
                    margin-left:1em;
                    img{
                        width: 100px;
                        height: 100px;
                        border-radius:10px;
                    }
                    span{
                        display: inline-block;
                        width: 100px;
                        text-align:center;
                        position: absolute;
                        bottom: 10px;
                        color:#fff;
                    }
                }
                .detail{
                    height: 100px;
                    font-size:14px;
                    box-sizing: border-box;
                    padding-left:1em;
                    p{
                        margin:4px;
                        span{
                            display: inline-block;
                            font-size: 12px;
                            line-height: 12px;
                            padding: 2px 5px;
                            border-radius: 2px;
                            border: 1px solid #12BF78;
                            color: #12BF78;
                            margin-right: 0.5em;
                        }
                    }
                    span{
                        font-size: 12px;
                        color: rgba(0, 0, 0, .4);
                        em{
                            font-size: 19px;
                            color: #FF7466;
                            font-weight: normal;
                        }
                    }
                    &>span:last-child{
                        float:right;
                        margin-right: 10px;
                    }

                }
            }

        }
    }
    .transfer{
        div{
            padding:0 1em;
        }
        h4{
            font-size: 12px;
            color: rgba(0, 0, 0, .4);
            line-height: 14px;
        }
        ul{
            list-style-type: none;
            display: flex;
            flex-wrap: wrap;
            max-height: 88px;
            overflow: hidden;
            padding: 0;
            margin:0;
            padding-bottom: 1em;
            li{
                padding: 5px 4px;
                background-color: rgba(45, 73, 46, .06);
                border-radius: 3px;
                color: rgba(0, 0, 0, .8);
                text-align: center;
                font-size: 13px;
                margin-top: 10px;
                margin-right: 4%;
                width: 22%;
                box-sizing: border-box;
                overflow: hidden;
                white-space: nowrap;
                word-break: break-all;
                text-overflow: ellipsis;
                a{
                    color: rgba(0, 0, 0, .8);
                    text-decoration: none;
                }
            }
        }
        .bus{
            ul{
                li:first-child{
                    background-color: #11BF79;
                    a{
                      color:white;
                    }

                }
            }
        }
    }
    .departure{
        box-sizing: border-box;
        background-color: #ffffff;
        position: relative;
        min-height: 80px;
        max-height: calc(100vh - 166px);
        overflow: auto;
        border:1px solid rgba(0, 0, 0, 0.1);
    }
    .sort{
        ul{
            list-style: none;
            padding: 0;
            margin:0;
            li{
                display: block;
                height: 45px;
                box-sizing: border-box;
                border-bottom: 1px solid rgba(0, 0, 0, .1);
                text-indent: 15px;
                line-height: 45px;
                color: rgba(0, 0, 0, .4);
            }

        }
        .correct{
            background-image: url(../../assets/plays/勾.png);
            background-repeat: no-repeat;
            background-position: center right 2em;
        }
    }
    .filter{
        .hight{
            max-height:80px;
        }
        div{
            padding: 0 1em;
        }
        ul{
            list-style-type: none;
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
            padding: 0;
            margin:0;
            li{
                padding: 5px 4px;
                background-color: rgba(45, 73, 46, .06);
                border-radius: 3px;
                color: rgba(0, 0, 0, .8);
                text-align: center;
                font-size: 13px;
                margin-top: 10px;
                margin-right: 4%;
                width: 22%;
                box-sizing: border-box;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                a{
                    color: rgba(0, 0, 0, .8);
                    text-decoration: none;
                }
            }
        }
        h4{
            font-size: 12px;
            color: rgba(0, 0, 0, .4);
            line-height: 14px;
        }
        .location{
            h4{
                display: flex;
                justify-content: space-between;
                span{
                    color: rgba(0, 0, 0, .8);
                }
            }
        }
        .btn{
            border-top: 1px solid rgba(0, 0, 0, .1);
            box-sizing: border-box;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            background: #fff;
            margin:0.5em;
            button{
                background-color: #ffffff;
                width: 33%;
                height: 35px;
                box-sizing: border-box;
                border: 1px solid #11BF79;
                border-radius: 3px;
                color: #11BF79;
                font-size: 13px;
                line-height: 35px;
                text-align: center;
                outline: none;
            }
            button:last-child{
                background-color: #11BF79;
                width: 65%;
                height: 35px;
                box-sizing: border-box;
                border-radius: 3px;
                color: #ffffff;
                font-size: 13px;
                line-height: 35px;
                text-align: center;
                border: none;

            }
        }

    }
    .border{
        // border-color: rgba(0, 0, 0, .1);
        border:1px solid rgba(0, 0, 0, .1);
        border-bottom-color: #ffffff;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }
    .posi{
        position: absolute;
        left:0;
        right:0;
        z-index:100;
        background:#fff;
    }



}


</style>
